<template>
  <div class="pieTu" ref="pieChart"></div>
</template>

<script>
export default {
  name: "",
  props: ["echartsData"],
  data() {
    return {};
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    pieChartInit(valData) {
      this.$echarts.init(this.$refs.pieChart).dispose(); //销毁实例
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.pieChart, null, {
        devicePixelRatio: 2,
      });

      var colorList = ["#4BDA73", "#6D9FFF", "#FDC025", "#FF8282", "#E328FE"];
      var data = valData;
      var dataChart = [];
      var sum = 0;
      data.forEach((item) => {
        sum += Number(item.value);
      });
      data.map((item, index) => {
        dataChart.push({
          value: item.value,
          name: item.name,
          itemStyle: {
            normal: {
              color: colorList[index],
            },
          },
        });
      });
      const title = {
        name: "居民已消耗积分",
        value: sum,
        unit: "次",
      };
      const rich = {
        name: {
          color: "#DEDEDE",
          fontSize: 16,
          align: "left",
          padding: [0, 10, 20, 0],
        },
        name1: {
          color: "#141E41",
          fontSize: 14,
          align: "left",
          padding: [0, 10, 0, 0],
        },
        value: {
          color: "#fff",
          fontSize: 16,
          align: "left",
        },
        title: {
          padding: [0, 0, 0, 0],
          color: "#141E41",
          fontSize: 14,
        },
        titleUnit: {
          color: "#fff",
          fontSize: 18,
          padding: [15, 0, 0, 0],
        },
        titleValue: {
          color: "#537BF6",
          fontSize: 30,
          // fontWeight: 600,
          padding: [15, 5, 5, 5],
        },
      };
      let option = {
        color: colorList,

        legend: {
          show: true,
          orient: "vertical",
          icon: "rent",
          right: "12%",
          y: "center",
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 30,
          align: "left",
          textStyle: {
            color: "#fff",
            rich,
          },
          formatter: function(name) {
            let res = data.filter((v) => v.name === name);
            let str = "";
            let ratio =
              Math.abs(sum) > 0
                ? (
                    (Math.abs(Number(res[0].value)) / Math.abs(sum)) *
                    100
                  ).toFixed(1)
                : 0;
            str =
              "{name1|" +
              res[0].name +
              "}{name1|" +
              "          " +
              res[0].value +
              "}{name1|" +
              "      " +
              ratio +
              "%" +
              "}";
            return str;
          },
        },
        series: [
          // 边框设置
          {
            radius: ["72%", "92%"],
            center: ["23%", "50%"],
            type: "pie",
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: true,
              },
              emphasis: {
                show: false,
              },
            },
            animation: false,
            tooltip: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: "rgba(206,213,225,0.2)",
              },
            },
            data: [1],
          },
          // 内圈
          {
            radius: ["0%", "60%"],
            center: ["23%", "50%"],
            type: "pie",
            hoverAnimation: false, // 取消掉环形图鼠标移上去时自动放大
            label: {
              show: true,
              position: "center",
              formatter: () =>
                `{titleValue|${title.value}}\n{title|${title.name}}`,
              rich,
            },
            labelLine: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            animation: false,

            itemStyle: {
              normal: {
                // // 设置阴影
                // shadowBlur: 30,
                // shadowColor: "rgba(255,255,255)",
                // shadowOffsetX: 0,
                // shadowOffsetY: 7,
              },
            },
            data: [
              {
                value: 100,
                name: "",
                itemStyle: { color: "rgba(206,213,225,0.2)" },
              },
            ],
          },
          // 主要展示层的
          {
            radius: ["70%", "85%"],
            center: ["23%", "50%"],
            type: "pie",
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            label: {
              show: false,
            },
            data: dataChart,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
  },

  watch: {
    echartsData: {
      handler(newVal) {
        this.$nextTick(() => {
          this.pieChartInit(newVal);
        });
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.pieTu {
  width: 600px;
  height: 220px;
  //   border: 1px solid #f00;
}
</style>
